<template>
  <div class="load-more">
    <van-loading v-show="showLoad" color="#2F3542" />
    <p v-show="more && !showLoad">——————没有更多——————</p>
  </div>
</template>

<script>
export default {
  name: 'loadMore',
  props: {
    isLoading: {
      type: Boolean,
      default: false
    },
    isMore: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      showLoad: false,
      more: false
    }
  },
  watch: {
    isLoading: {
      handler: function (loading) {
        this.showLoad = loading
      }
    },
    isMore: {
      handler: function (status) {
        this.more = status
      }
    }
  },
  created () {
    this.showLoad = this.isLoading
    this.more = this.isMore
  }
}
</script>

<style lang="stylus" scoped>
.load-more
  width 100%
  height 40px
  display flex
  justify-content center
  align-items center
</style>
